<template>
	<div class="player" ref="player"></div>
</template>

<script>
	import Player from 'xgplayer'
	export default {
		name: 'Player',
		props: ["mvUrl","picUrl"],
		watch: {
			mvUrl: function() {
				this.initPlayer();
			}
		},
		methods: {
			initPlayer() {
				let player = new Player({
				  "el": this.$refs.player,
				  "url": this.mvUrl,
					"playsinline": true,
					"playbackRate": [0.5, 1, 1.5, 2, 2.5, 3],
					"rotate": {
							"clockwise": false,
							"innerRotate": true
					},
					"screenShot": true,
					"download": true,
					"pip": true,
					"width": "640px",
					"height": "360px",
					"poster": this.picUrl
				});
			}
		}
	}
</script>

<style lang="less" scoped>
</style>
